<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@include file="/common.jsp"%>
<!DOCTYPE html>
<html lang="zh">
<meta charset="utf-8">
<head></head>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-picture-add">
			<div class="form-group">
				<label class="col-sm-2 control-label">图片名称：</label>
				<div class="col-sm-10">
					<input id="pictureName" name="pictureName" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">图片顺序：</label>
				<div class="col-sm-10">
					<input id="pictureSort" name="pictureSort" class="form-control" type="text">
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-2 control-label">图片地址：</label>
				<div class="col-sm-5">
					<!--id是给jquery使用的，name是给后台action使用的，必须和后台的名字相同！！ -->
					<input type="file" id="addUpload" name="upload" onchange="uploadFile()" class="form-control" accept="image/*" />
					<input type="hidden" id="pictureUrl" name="pictureUrl" />
				</div>
				<div class="col-sm-5">
					<img class="img-rounded" width="100" height="100" id="img" class="img-thumbnail" />
				</div>

			</div>

		</form>
	</div>
	<script type="text/javascript">
		var prefix = "${ctx}/system/picture"
		$("#form-picture-add").validate({
			rules : {
				pictureName : {
					required : true,
					minlength : 2,
					maxlength : 30,
				},
				pictureUrl : {
					required : true,
				},
				pictureSort : {
					required : true,
					range : [ 1, 10 ]
				},
			}
		});
	
		function submitHandler() {
			if ($.validate.form()) {
				$.operate.save(prefix + "/add", $('#form-picture-add').serialize());
			}
		}
	
	
		function uploadFile() {
			var formData = new FormData();
			formData.append("upload", $("#addUpload")[0].files[0]); //第一个file1代表后台文件属性名，第二个file1表示html中input的id
			$.ajax({
				type : "post",
				url : "${ctx}/file/upload",
				data : formData,
				processData : false,
				contentType : false,
				dataType : 'json',
				success : function(data) {
					if (data.code == 0) {
						$("#pictureUrl").val(data.data.path);
						$("#img").attr("src", "${ctx }/" + data.data.path);
					}
				},
				error : function(msg) {
					alert(msg.responsText);
				}
			});
		}
	</script>
</body>
</html>
